<template>
  <div class="all" style="margin-top: 11px;">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" status-icon label-position="right" label-width="100px">
      <el-form-item label="用户名">
     {{ruleForm.adminName}}
      </el-form-item>
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input type="password" v-model="ruleForm.oldPassword" placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="chenckpass">
                 <el-input type="password" v-model="ruleForm.chenckpass" placeholder="请确认密码"></el-input>
      </el-form-item>
      <div style="text-align: center;"><el-button type="primary" @click="Submit">修改</el-button></div>

    </el-form>
  </div>
</template>

<script>
  import {PasswordReset} from '@/utils/API'
  import Cookies from 'js-cookie'
    export default {
      name:'ChPass',
      data(){
        var validatePass= (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else if (value === this.ruleForm.oldPassword) {
                callback(new Error('不能原密码相同'));
              } else {
                callback();
              }
            };
            var validatePass1= (rule, value, callback) => {
                  if (value === '') {
                    callback(new Error('请输入密码'));
                  } else if (value !== this.ruleForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                  } else {
                    callback();
                  }
                };
        return{
          ruleForm:{
            oldPassword:'',
            newPassword:'',
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            chenckpass:''
          },
          rules:{
            newPassword:[{ validator: validatePass, trigger: 'blur' }],
            chenckpass:[{ validator: validatePass1, trigger: 'blur' }],
            oldPassword:[ { required:true , trigger: 'blur',message:'请输入密码' },
                         ]
          }
        }
      },
      methods:{
        Submit(){
         this.$refs.ruleForm.validate((valid)=>{
           if(valid){
             PasswordReset(this.ruleForm).then(res=>{
               if(res.code==0){
                 this.$message.success('修改成功')
                 this.$router.push({ name:"login"})
               }
             })
           }
         })


        }
      },
      mounted(){
          this.adminName=this.$cookies.get('adminName')
      }
    }
</script>

<style lang="scss" scoped>
  .el-form{
    width: 21%;
    margin: 2% auto;
    .el-input{width: 91%;}
    .el-button{margin: auto;text-align: center;}
  }

</style>
